<link rel="stylesheet" href="/assets/home/css/avatar.css">
<link rel="stylesheet" href="/assets/home/css/profile.css">
<link rel="stylesheet" href="/assets/libs/fastadmin-citypicker/dist/css/city-picker.css">
<script src="/assets/libs/fastadmin-citypicker/dist/js/city-picker.data.min.js"></script>
<script src="/assets/libs/fastadmin-citypicker/dist/js/city-picker.min.js"></script>

<header class="mui-bar mui-bar-nav" style="position: sticky;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">修改资料</h1>
</header>

<div class="top_div">
    <div class="userInfo">
        <!-- /assets/home/images/avatar.jpg -->
        <img class="upic" src="{$LoginAuth['avatar_cdn']}" />

    </div>
</div>

<div class="form">
    <form method="post" enctype="multipart/form-data">
        <div class="item">
            <div class="titles">
                昵称：
            </div>
            <input type="text" name="nickname" placeholder="请输入昵称" value="{$LoginAuth['nickname']}">
        </div>
        <div class="item">
            <div class="titles">
                邮箱：
            </div>
            <input type="text" name="email" placeholder="请输入邮箱" value="{$LoginAuth['email']}">
        </div>
        <div class="item">
            <div class="titles">
                登录密码：
            </div>
            <input type="password" name="password" placeholder="如果为空就不修改密码">
        </div>
        <div class="item">
            <div class="titles">
                确认密码：
            </div>
            <input type="password" name="repass" placeholder="确认密码">
        </div>
        <div class="item">
            <div class="titles">
                性别：
            </div>
            <div class="sex">
                <input type="radio" name="sex" {$LoginAuth['gender']==0 ? 'checked' : '' } value="0" id="secrecy"><label
                    for="secrecy">保密</label>
                <input type="radio" name="sex" {$LoginAuth['gender']==1 ? 'checked' : '' } value="1" id="man"><label
                    for="man">男</label>
                <input type="radio" name="sex" {$LoginAuth['gender']==2 ? 'checked' : '' } value="2" id="woman"><label
                    for="woman">女</label>
            </div>
        </div>
        <div class="item cityitem">
            <div class="titles">
                地区选择：
            </div>
            <div class="city">
                <input readonly type="text" id="city-picker" data-toggle="city-picker" value="{$LoginAuth['district']}">
                <input type="hidden" name="region" id="region" value="{$LoginAuth['district']}">
            </div>
        </div>
        <div class="item avtil">
            <div class="titles">
                修改头像：
            </div>
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined"
                onclick="avatarfile.click()">上传头像</button>
            <input type="file" name="avatar" id="avatarfile" hidden />
        </div>
        <div class="avatarchange">
            <img src="{$LoginAuth['avatar_cdn']}" class="avac" />
        </div>

        <input type="submit" value="修改资料">
    </form>
</div>
<script>
    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }

    $('#avatarfile').change(function () {
        var file = $(this)[0].files[0] ? $(this)[0].files[0] : {}

        var url = GetObjectURL(file)

        $('.avac').attr('src', url)
    })

    $("#city-picker").on("cp:updated", function () {
        var citypicker = $(this).data("citypicker");
        var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
        $("#region").val(code);
    });
</script>